<template>
  <div>

    <el-dialog :title="upload.title" v-model="upload.open" width="400px"
               append-to-body @close="$emit('update:modelValue', false)">
      <el-upload
          ref="uploadRef"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url + '?updateSupport=' + upload.updateSupport  + '&projectId=' + upload.projectId"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
      >
        <el-icon class="el-icon--upload">
          <upload-filled/>
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <div class="el-upload__tip">
              <el-checkbox v-model="upload.updateSupport"/>
              是否忽略已经存在的数据
            </div>
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                     @click="importTemplate">下载模板
            </el-link>
          </div>
        </template>
      </el-upload>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ImportExcelDialog">
import {reactive, ref} from 'vue'
import {getToken} from "@/utils/auth";
import {UploadFilled} from '@element-plus/icons-vue'

const {proxy} = getCurrentInstance();

const props = defineProps({
  importUrl: {
    type: String,
    required: true
  },
  templateUrl: {
    type: String,
    required: true
  },
  modelValue: {
    type: Boolean,
    required: true
  },
  templateFileName: {
    type: String,
    required: true
  },
  projectId: {
    type: String,
    required: false
  }
})

const emit = defineEmits(['success'])

// 导入参数
const upload = reactive({
  open: props.modelValue, // 使用 props 初始化,
  title: "数据导入",
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  projectId: props.projectId,
  // 设置上传的请求头部
  headers: {Authorization: "Bearer " + getToken()},
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + props.importUrl
})

const uploadRef = ref(null)

// watch(
//     () => props.modelValue,
//     (newVal) => {
//       upload.open = newVal
//     }
// )
// // 监听 projectId 变化并同步到 upload.projectId
// watch(
//     () => props.projectId,
//     (newVal) => {
//       upload.projectId = newVal;
//     }
// )
// 合并两个 watch 监听器
watch(
    () => ({ modelValue: props.modelValue, projectId: props.projectId }),
    (newVal) => {
      upload.open = newVal.modelValue;
      upload.projectId = newVal.projectId;
    }
)

/** 文件上传中处理 */
function handleFileUploadProgress(event, file, fileList) {
  upload.isUploading = true
}

/** 文件上传成功处理 */
function handleFileSuccess(response, file, fileList) {
  upload.open = false
  upload.isUploading = false
  uploadRef.value.handleRemove(file)
  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true})
  emit('success', response)
}

/** 提交上传文件 */
function submitFileForm() {
  uploadRef.value.submit()
}

// 点击取消按钮
function handleCloseDialog() {
  upload.open = false
  emit('update:modelValue', false)
}

/** 下载模板操作 */
function importTemplate() {
  // proxy.download("/scm/scmImportInquiriesIn/importTemplate", {
  proxy.download(props.templateUrl, {}, props.templateFileName + `_${new Date().getTime()}.xlsx`);
  // window.location.href = import.meta.env.VITE_APP_BASE_API + props.templateUrl
}
</script>

<style scoped>
.el-upload__tip {
  font-size: 12px;
}
</style>
